<template>
  <div class="condition">
    <!-- 搜索框 -->
    <div class="search">
      <el-input
        v-model="modelValue.search"
        @change="handler"
        placeholder="搜索条件..."
        class="search-input">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

    </div>

    <!-- 条件列表 -->
    <div class="condition-list">
      <ConditionItemVue
        v-for="item in conditionList"
        :key="item.name"
        :name="item.name"
        :list="item.list"
        @change-condition="handler"
        :multi="item.multi"
        :show-no-limit="item.showNoLimit"
        v-model="modelValue[item.value]"
      />
    </div>

    <div class="toolbar">
      <slot name="toolbar"></slot>
    </div>
  </div>
</template>

<script>
import TaskContainer from './TaskContainer.vue' ;
import ConditionItemVue from './ConditionItem.vue';

export default {
  props: {
    conditionList: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      searchQuery: '', // 新增搜索查询
    };
  },
  components: {
    TaskContainer,
    ConditionItemVue,
  },
  methods: {
    handler(childCondition) {
      if (childCondition != null && typeof(childCondition) !== 'string') {
        Object.assign(this.modelValue, childCondition)
      }
      this.$emit('update:modelValue', this.modelValue);
      //console.log(this.modelValue)
    },
  }
}
</script>

<style scoped>
.condition {
  width: 100%;
  padding: 24px;
}

.search {
  margin-bottom: 24px;
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 10px;
  color: white;
  transition: background 0.3s ease, border 0.3s ease;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #7a9dff;
  outline: none;
}

.condition-list {
  margin-bottom: 24px;
}

.toolbar {
  display: flex;
  justify-content: flex-end;
}
</style>